
<template>
  <div class="background-gray" id="hot_discussion">
    <header-vfhz-car v-if="$.appname === 'cn.carowl.vfuhuizhong'"/>
    <icar-header v-if="$.appname !== 'cn.carowl.vfuhuizhong'" bgColor="#F7F7F7" mainText="热门讨论" textColor="#474747">
      <img :src="left" v-go="'carFri_home'">
    </icar-header>
    <div></div>
    <!-- <form class="search" onsubmit="return false">
      <input type="search" id="searchTopic" v-model="searchValue" placeholder="搜索你感兴趣的话题" autocomplete="off">
    </form> -->
     <form class="search" onsubmit="return false">
        <input  type="search"  :class="isFocus?'focus':'blur'" @focus="focus" @blur="blur" id="searchTopic" v-model="searchValue" placeholder="搜索你感兴趣的话题" autocomplete="off">
        <span class="cancel" @click="getList('',false)" v-show="isCancel">取消</span>
    </form>
    <empty class="empty" v-if="topicList.length === 0" message="暂时没有话题讨论"></empty>
    <ul v-if="topicList.length !== 0">
      <li class="main" v-for="item in topicList" v-tap="{methods: checkDetail, topicId: item.id, topicTit: item.content}">
        <div class="row">
          <div class="img">
            <img :src="item.pic ? addPath(item.pic) : defaultImg" height="100%" width="100%">
          </div>
          <div class="content">
            <div>
              <h4>#{{ item.content}}#</h4>
            </div>
            <div>
              <p>{{ item.desp }}</p>
            </div>
            <div>
              <span>{{ item.count }}观点</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 惠众底部 -->
    <magicFooter v-if="$.appname === 'cn.carowl.vfuhuizhong'"></magicFooter>
  </div>
</template>

<script>
// obj
import Vue from "vue";
// components
import icarHeader from "components/my-header";
import left from "assets/left-gray.svg";
import empty from "components/empty-page.vue";
// image
import vfacDefault from "assets/default_user_icon.png";
//vfhz image
import imageServices from "services/getImage/getImage";

// service
import QueryFleetTopicService from "services/carFriend/QueryFleetTopic";
//惠众使用的footer
import magicFooter from "components/maFooter";
//惠众头部
import headerVfhzCar from "components/header_vfhz_carFri";
export default {
  name: "hot_discussion",
  data() {
    return {
      left,
      defaultImg: "",
      topicList: {},
      searchValue: "",
      isFocus: false,
      isCancel: false
    };
  },

  methods: {
    focus() {
      this.isFocus = true;
      setTimeout(() => {
        this.isCancel = true;
      }, 500);
    },
    blur() {
      this.isFocus = false;
      this.isCancel = false;
    },
    goBack() {
      this.$router.push({
        name: "carFri_home"
      });
    },
    getList(searchValue,isFocus) {
      if (isFocus !== undefined) {
        this.searchValue = "";
        this.isFocus = isFocus;
        this.isCancel = isFocus;
      }
      QueryFleetTopicService.bind(this)(
        {
          searchValue: searchValue
        },
        resp => {
          this.topicList = [];
          setTimeout(() => {
            this.topicList = resp.topicDatas;
          }, 10);
        }
      );
    },
    checkDetail(params) {
      this.$router.push({
        name: "topic_detail",
        params: {
          topicId: params.topicId,
          topicTit: params.topicTit
        }
      });
    }
  },
  created() {
    if (this.$.appname === "cn.carowl.vfuhuizhong") {
      imageServices.bind(this)({}, res => {
        this.defaultImg = res.data.newLogo;
      });
    } else {
      this.defaultImg = vfacDefault;
    }
  },
  beforeRouteEnter(to, from, next) {
    QueryFleetTopicService.bind(Vue.prototype)({}, resp => {
      next(vm => {
        vm.topicList = resp.topicDatas;
        console.log(vm.topicList);
      });
    });
  },
  mounted() {
    let el = document.querySelector("#searchTopic");
    el &&
      el.addEventListener("keyup", event => {
        console.log(event.keyCode)
        if (event.keyCode === 13) {
          document.getElementById("searchTopic").blur();
          this.getList(this.searchValue);
        }
      });
  },
  components: {
    icarHeader,
    empty,
    headerVfhzCar,
    magicFooter
  }
};
</script>

<style>
#hot_discussion {
  position: relative;
  padding-bottom: 50px;
}
#hot_discussion .search {
  width: 100%;
  padding: 6px 10px;
}
#hot_discussion .blur {
  width: 100%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 20vw;
  background-color: #fff;
  transition: all 0.5s ease;
}
#hot_discussion .cancel {
  float: right;
  height: 30px;
  line-height: 30px;
}
#hot_discussion .focus {
  width: 90%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 15px;
  background-color: #fff;
  transition: all 0.5s ease;
}

#hot_discussion .main {
  background-color: #fff;
  padding: 7px 10px;
  padding-right: 5px;
  border-bottom: 0.5px solid #f7f7f7;
  color: #656565;
}
#hot_discussion .main .content div {
  padding-top: 7px;
}
#hot_discussion .main .content div span {
  margin-right: 15px;
}
#hot_discussion .main .content div h4 {
  color: #070707;
  font-size: 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 30px;
  line-height: 14px;
}
#hot_discussion .row {
  flex-flow: row;
  justify-content: flex-start;
}
#hot_discussion .img {
  width: 65px;
  margin-right: 24px;
  flex-shrink: 0;
}
#hot_discussion .img img {
  width: 65px;
  height: 65px;
}
#hot_discussion .result_empty{
  background-color:#F8F8F8;
}
</style>